<template>
	<view class="container">
		<view class="index-top">
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="f-center top-title"></view>
		</view>
		<view
			:style="{ height: statusBarHeight + 'px' }"
			style="padding-top: 88rpx; width: 750rpx; box-sizing: content-box"
		></view>
		<view class="kind-title">服务价目表</view>
		<view class="line-title f-center">点击图片了解洗护流程</view>
		<!-- v-if="isfetch" -->
		<view style="padding: 0 32rpx 20rpx 0rpx">
			<view class="category">
				<view
					:class="current === -1 ? 'item select' : 'item'"
					@click="goodsTypeChange(-1)"
					>全部</view
				>
				<view v-for="(item, index) in goodsTypeList" :key="index">
					<view
						:class="current === index ? 'item select' : 'item'"
						@click="goodsTypeChange(index)"
						>{{ item.goodsType }}</view
					>
				</view>
			</view>
			<view
				v-if="goodsList.length > 0"
				style="width: calc(100% - 100px); float: left"
			>
				<view class="flex f-justifyB wrap">
					<view
						class="goods-item"
						v-for="(item, index) in goodsList"
						:key="index"
						@click="detailmethod(item)"
					>
						<view
							style="width: 270rpx"
							class="text-overflow font26 f-center gray333"
							>{{ item.goodsName }}</view
						>
						<image :src="item.goodsUrl" class="item-img"></image>
						<view class="flex f-align f-justifyB w100">
							<view class="font40 gray333"
								><text class="font26 blue">￥</text>{{ item.goodsMoney }}</view
							>
							<view
								@click.stop="selectHandle(item)"
								class="f-center"
								style="width: 66rpx; height: 66rpx; justify-content: flex-end"
							>
								<image
									src="../static/img/fenleijiahao@2x.png"
									style="width: 66rpx; height: 66rpx"
								></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex f-column f-align" v-else>
				<text class="font36 gray999 bold mt50">暂无洗护套餐</text>
			</view>
		</view>

		<uni-popup ref="uniPopup" type="bottom">
			<view class="service-box flex f-column">
				<image
					src="../static/img/close-blue.png"
					class="close-btn"
					@click="closePopup()"
				></image>
				<text class="font36" style="align-self: center">增值服务</text>
				<view class="mt30 img-box flex f-align">
					<view class="inner-box">
						<image :src="goods_img" mode=""></image>
					</view>
				</view>
				<text class="font28 gray333 mt40">必选项目</text>
				<view class="flex wrap">
					<view class="f-item active">清洗</view>
				</view>
				<text class="font28 gray333" style="margin-top: 70rpx">增值服务</text>
				<text class="font22 gray999"
					>(因修复价格不等，收到衣物后将根据项目进行划价，取衣时需支付额外费用，请您提前咨询客服了解修复价格，以免造成不便)</text
				>
				<view class="flex wrap">
					<view
						@click="selectProject(item)"
						class="f-item"
						:class="{ active: item.check }"
						v-for="(item, index) in itemList"
						:key="index"
						>{{ item.projectName }}</view
					>
				</view>
				<view class="font32 white join-btn f-center" @click="addCart"
					>加入购物车</view
				>
			</view>
		</uni-popup>

		<!-- 授权登录 -->
		<auth ref="auth"></auth>
	</view>
</template>

<script>
import auth from '../components/auth.vue'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			statusBarHeight: getApp().globalData.statusBarHeight,
			itemList: [],
			page: 1,
			loadStatus: 'more',
			isfetch: false,
			goodsList: [],

			goods_id: '',
			goods_img: '',
			current: -1,
			goodsTypeList: ['已预约', '服务中', '待取件', '交易完成']
		}
	},
	components: {
		auth
	},
	onLoad(options) {
		//二维码跳转传值获取数据
		let that = this
		if (options) {
			// let t = options
			var pages = getCurrentPages()
			var page = pages[pages.length - 1]
			const opt = page.options
			let t = options
			if (Object.keys(t).length) {
				console.log('22222')
				let temp = t[Object.keys(t)[0]]
				console.log('拼接' + temp)
				uni.setStorageSync('flag', '扫码下单')
				getApp().globalData.gzbh = temp
				// getApp().globalData.gzbh
				uni.setStorageSync('lijiyuyue', '1')
				console.log(101, getApp().globalData.gzbh)
			}
		}
	},
	onShow() {
		this.page = 1
		this.loadStatus = 'more'
		this.getGoodsType()
		this.getKindList()
		this.getGoodsList()
		if (this.hasLogin) {
			this.getCartList()
		}

		console.log(10, getApp().globalData.gzbh)
	},
	onHide() {
		this.$refs.auth.close()
	},
	onPullDownRefresh() {
		this.page = 1
		this.loadStatus = 'more'
		this.getGoodsList()
		this.getKindList()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		detailmethod(item) {
			uni.setStorageSync('lijiyuyue', '1')
			this.$api.toPage('./productDetail?id=' + item.id, 1, this)
		},
		getCartList() {
			this.$http
				.ajax({
					url: '/ShoppingTrolley/list',
					params: {
						openId: uni.getStorageSync('openId')
					}
				})
				.then((res) => {
					if (res.code == 0 && res.count > 0) {
						let cartNum = res.data.reduce((a, b) => {
							return a + b.goodsNumber
						}, 0)
						uni.setStorageSync('cartNum', cartNum)
						uni.setTabBarBadge({
							index: 2,
							text: JSON.stringify(cartNum)
						})
					}
				})
		},
		addCart() {
			this.$clickHandle.notClickMore({
				key: 'addCart',
				time: 2000,
				success: () => {
					let arr = []
					this.itemList.forEach((item) => {
						if (item.check) {
							arr.push(item.id)
						}
					})
					this.$http
						.ajax({
							url: '/ShoppingTrolley/add',
							params: {
								goodsId: this.goods_id,
								projectId: arr.join(','),
								goodsNumber: 1,
								openId: uni.getStorageSync('openId')
							},
							isOP: 0
						})
						.then((res) => {
							if (res.code == 200) {
								uni.getStorage({
									key: 'cartNum',
									success: (res) => {
										uni.setStorageSync('cartNum', res.data + 1)
										uni.setTabBarBadge({
											index: 2,
											text: JSON.stringify(res.data + 1)
										})
									}
								})
								this.$api.msg('加入购物车成功')
								this.closePopup()
							} else {
								this.$api.msg(res.msg)
							}
						})
				}
			})
		},
		closePopup() {
			this.goods_id = ''
			this.itemList.forEach((item) => (item.check = false))
			this.$refs.uniPopup.close()
		},
		selectHandle(item) {
			if (!this.hasLogin) {
				this.$refs.auth.open()
				return
			}

			this.goods_img = item.goodsUrl
			this.goods_id = item.id
			this.$refs.uniPopup.open()
		},
		selectProject(item) {
			item.check = !item.check
			this.$forceUpdate()
		},
		getKindList() {
			this.$http
				.ajax({
					url: '/Project/list',
					params: {
						page: 1,
						limit: 99,
						appId: uni.getAccountInfoSync().miniProgram.appId,
						type: 1
					},
					isOP: 0
				})
				.then((res) => {
					if (res.code == 200) {
						res.data.forEach((item) => (item.check = false))
						this.itemList = res.data
					}
				})
		},
		getGoodsList(goodsTypeId) {
			const params = {
				page: this.page,
				limit: 999,
				appId: uni.getAccountInfoSync().miniProgram.appId,
				type: 1
			}
			if (goodsTypeId) {
				params.goodsTypeId = goodsTypeId
			}
			this.$http
				.ajax({
					url: '/Goods/list',
					params: params
				})
				.then((res) => {
					this.isfetch = true
					if (res.code == 0) {
						this.goodsList = res.data
					} else {
						this.goodsList = []
						this.$api.msg(res.msg)
					}
				})
		},
		goodsTypeChange(index) {
			this.current = index
			if (this.current === -1) {
				this.getGoodsList()
			} else {
				console.log('this.current', this.current)
				const checked = this.goodsTypeList[this.current]
				console.log('checked', checked)
				if (checked) {
					this.getGoodsList(checked.id)
				}
			}
		},
		getGoodsType() {
			this.$http
				.ajax({
					url: '/GoodsType/list',
					params: {
						page: 1,
						limit: 9999,
						appId: uni.getAccountInfoSync().miniProgram.appId
					},
					isOP: 0
				})
				.then((res) => {
					if (res.code == 200) {
						console.log('res', res)
						if (res.data) {
							this.goodsTypeList = res.data
						}
					}
				})
		}
	}
}
</script>

<style scoped lang="scss">
.category {
	width: 100px;
	text-align: center;
	display: inline-block;
	float: left;
	.item {
		padding: 10rpx 0;
		margin: 15rpx 32rpx;
		font-size: 30rpx;
	}
	.select {
		font-size: 35rpx;
		border-bottom-style: solid;
		border-bottom-width: 2px;
		border-bottom-color: #7874d9;
	}
}
.index-top {
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	background-color: #4082ff;

	.top-title {
		height: 88rpx;
		padding: 0 20rpx;
	}
}

.service-box {
	width: 750rpx;
	background: #ffffff;
	padding: 40rpx 32rpx;
	border-radius: 60rpx 60rpx 0 0;
	position: relative;

	.img-box {
		width: 686rpx;
		height: 264rpx;
		border-radius: 12rpx;
		background-image: url('https://xx.img.dz888.shop/wx1.jpg');
		background-size: 100% 100%;
		padding-left: 50rpx;

		.inner-box {
			width: 170rpx;
			height: 170rpx;
			background: #3d99fe;
			border: 1rpx solid #ffffff;
			box-shadow: 2rpx 4rpx 11rpx 0rpx rgba(20, 65, 143, 0.45);
			border-radius: 14rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
			}
		}
	}

	.f-item {
		width: 130rpx;
		height: 60rpx;
		background: #ebebeb;
		border-radius: 8rpx;
		font-size: 24rpx;
		line-height: 60rpx;
		color: #777777;
		text-align: center;
		margin-right: 55rpx;
		margin-top: 20rpx;

		&:nth-child(4n) {
			margin-right: 0;
		}
	}

	.active {
		background: #4082ff;
		color: #ffffff;
	}

	.join-btn {
		width: 686rpx;
		height: 72rpx;
		background: #4082ff;
		border-radius: 38rpx;
		box-shadow: 0rpx -6rpx 12rpx rgba(24, 70, 157, 0.1);
		margin-top: 100rpx;
	}

	.close-btn {
		width: 59rpx;
		height: 59rpx;
		position: absolute;
		right: 28rpx;
		top: 28rpx;
		z-index: 99;
	}
}

.goods-item {
	width: 250rpx;
	background: rgba(255, 255, 255, 0.39);
	box-shadow: 0rpx 8rpx 12rpx rgba(24, 70, 157, 0.53);
	border-radius: 8rpx;
	margin-top: 20rpx;
	position: relative;
	padding: 25rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.item-img {
		width: 200rpx;
		height: 200rpx;
		margin: 10rpx 0;
	}

	.item-title {
		width: 210rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 82rpx;
		padding-left: 20rpx;
	}

	.no-goods {
		position: absolute;
		left: 0;
		top: 0;
		width: 210rpx;
		height: 262rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 10rpx;
		z-index: 10;
	}

	.select-goods {
		position: absolute;
		left: 0;
		top: 0;
		width: 210rpx;
		height: 262rpx;
		background: rgba(48, 99, 217, 0.3);
		border: 2rpx solid #3063d9;
		border-radius: 10rpx;
		z-index: 10;
	}
}

.container {
	padding: 0;

	.kind-title {
		width: 750rpx;
		height: 80rpx;
		background: rgba(236, 234, 234, 1);
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		line-height: 80rpx;
		color: #000000;
		text-align: center;
	}

	.line-title {
		font-size: 24rpx;
		line-height: 44rpx;
		color: #777777;
		position: relative;
	}

	.line-title::before {
		position: absolute;
		width: 200rpx;
		height: 2rpx;
		background-color: #aaaaaa;
		content: '';
		left: 32rpx;
		top: 21rpx;
	}

	.line-title::after {
		position: absolute;
		width: 200rpx;
		height: 2rpx;
		background-color: #aaaaaa;
		content: '';
		right: 32rpx;
		top: 21rpx;
	}

	::v-deep .uni-popup__wrapper-box {
		padding-bottom: 0;
	}
}
</style>
